<template>
	<div class="my-slide-container">
		<div class="my-slide" :style=" 'width:' + '200' * cards.length + 'px;' ">
			<div :class="gradualItem" v-for="(item, index) in cards" :key="index">
				<mu-row class="sld-content">
					<mu-col class="span-2">
						<span class="my-slide-title">{{item.title}}</span>
						<span class="my-slide-desc"><b>{{item.desc}}</b></span>
					</mu-col>
					<mu-col class="span-1">
						<img class="my-slide-img" :src="item.img">
					</mu-col>
				</mu-row>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "MyCardSlider",
	props: {
		gradual: Boolean, default() {
			return true
		},
	},
	data() {
		return {
			cards: [],
		}
	},
	created() {
		this.getCards()
	},
	computed: {
		gradualItem: function () {
			return this.gradual ? 'my-slide-gradual-item' : 'my-slide-item'
		}
	},
	methods: {
		getCards: function () {
			this.$axios.get('http://localhost:8081/api/cards')
				.then(res => {
					this.cards = res.data
				})
				.catch(err => {
					console.log(err)
				})
		},
	}
}
</script>

<style scoped>

	.my-slide-container {
		overflow-x: auto;
		overflow-y: hidden;
	}
	.my-slide {
		height: 80px;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.sld-content {
		height: 100%
	}
	.span-2 {
		flex: 2;
		height: 100%;
		flex-flow: column;
		display: flex;
	}
	.span-1 {
		flex: 1;
		height: 100%;
	}
	.my-slide-title {
		font-size: 15px;
		flex: 1;
		line-height: 35px;
	}
	.my-slide-desc {
		font-size: 10px;
		flex: 1;
	}
	.my-slide-img {
		width: 120%;
		height: 100%;
	}
	.my-slide-item{
		background-color: #FAFAFA;
	}
	.my-slide-gradual-item,
	.my-slide-item {
		display: inline-block;
		width: 200px;
		margin: 10px;
		height: 70px;
		border-radius: 15px;
		overflow: hidden;
		box-shadow: 0 1px 3px #F3F3F3;
	}
	.my-slide-gradual-item{
		color: white;
	}
	.my-slide-gradual-item:nth-child(1) {
		background-image: linear-gradient(90deg, #FFB8BD, #F57D85);
	}
	.my-slide-gradual-item:nth-child(2) {
		background-image: linear-gradient(90deg, #BDBDFD, #7E7DFD);
	}
	.my-slide-gradual-item:nth-child(3) {
		background-image: linear-gradient(90deg, #B9EF91, #98EF57);
	}
	.my-slide-gradual-item:nth-child(4) {
		background-image: linear-gradient(90deg, #FFDA78, #FFBA00);
	}

</style>